<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>
    ComfortableHome
  </title>

  <!-- range selctor slider style -->


  <link rel="stylesheet" href="css/ion.rangeSlider.min.css" />
  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet" />
  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="css/responsive.css" rel="stylesheet" />
</head>

<body>
	
 <div id="myDiv">

  <div class="hero_area">
   
    <!-- slider section -->
    <section class=" slider_section ">
      <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="slider_container">
                <div class="box">
                  <div class="detail-box">
                    <h1>
                      Comfortable
                    </h1>
                    <h2>
                      Home
                    </h2>
                  </div>
                  <div class="img-box">
                    <div class="play_btn">
                      <a href="">
                        <img src="images/play.png" alt="">
                      </a>
                    </div>
                    </a>
                  </div>
                </div>
                <div class="btn-box">
                  <a href="">
                    Discover More
                  </a>
                </div>
              </div>
            </div>
            <div class="carousel-item ">
              <div class="slider_container">
                <div class="box">
                  <div class="detail-box">
                    <h1>
                      Comfortable
                    </h1>
                    <h2>
                      Home
                    </h2>
                  </div>
                  <div class="img-box">
                    <div class="play_btn">
                      <a href="">
                        <img src="images/play.png" alt="">
                      </a>
                    </div>
                    </a>
                  </div>
                </div>
                <div class="btn-box">
                  <a href="">
                    Discover More
                  </a>
                </div>
              </div>
            </div>
            <div class="carousel-item ">
              <div class="slider_container">
                <div class="box">
                  <div class="detail-box">
                    <h1>
                      TripBiz
                    </h1>
                    <h2>
                      A
                      Human
                      Explostion
                    </h2>
                  </div>
                  <div class="img-box">
                    <div class="play_btn">
                      <a href="">
                        <img src="images/play.png" alt="">
                      </a>
                    </div>
                    </a>
                  </div>
                </div>
                <div class="btn-box">
                  <a href="">
                    Discover More
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="custom_carousel-control">
          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </section>

    <!-- end slider section -->
  </div>






  <!-- trip section -->

  <section class="trip_section layout_padding" id="bookTrip">
    <div class="container">
      <div class="heading_container">
        <h2>
          Book Your Home
        </h2>
        <p>
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
        </p>
      </div>
    </div>
    <div class="container ">
      <div class="box container-bg">
        <div class="img-box">
          <img src="images/form-img.png" alt="">
        </div>
        <div class="form_container">
          <form >
            <div class="form-group">
              <div class="input-group ">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <img src="images/location.png" alt="">
                  </div>
                </div>
                <input type="text" v-model="name" class="form-control" id="inputDestination" placeholder="请输入你的姓名">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group ">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <img src="images/location.png" alt="">
                  </div>
                </div>
                <input type="text"  v-model="telphone" class="form-control"  placeholder="请输入你的电话号码">
              </div>
            </div>

            <div class="form-group">
              <div class="input-group ">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <img src="images/earth.png" alt="">
                  </div>
                </div>
                <input type="text"  v-model="rid" class="form-control"  placeholder="房间号">
              </div>
            </div>

            <div class="form-group">
              <div class="input-group ">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <img src="images/earth.png" alt="">
                  </div>
                </div>
                <input type="text"  v-model="rname" class="form-control" placeholder="房间名称">
              </div>
            </div>

            <div class="form-group">
              <div class="input-group ">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <img src="images/earth.png" alt="">
                  </div>
                </div>
                <input type="text"  v-model="wkprice" class="form-control" placeholder="房间价格">
              </div>
            </div>

            <div class="form-group">
              <div class="input-group ">
                <div class="input-group-prepend">
                  <div class="input-group-text">
                    <img src="images/earth.png" alt="">
                  </div>
                </div>
                <input type="text"  v-model="id" class="form-control" id="inputLocation" placeholder="你的身份证">
              </div>
            </div>

            <div class="range_input">
            </div>

            <div class="btn-box">
              <button type="button"  @click="commit" class="">Book Now</button>
            </div>

          </form>


        </div>
      </div>
    </div>
  </section>

  <!-- end trip section -->

<!--   房间显示-->
 <div  style=" margin-left: 400px ;width:1200px ;height:600px">
   <el-table
           :data="roomAndType"
           style="width:700px"
           @row-click="choose"
           height="500px"

   >
     <el-table-column
             prop="rname"
             label="房间名称"
             width="180">
     </el-table-column>
     <el-table-column
             prop="rid"
             label="房间号"
             width="180">
     </el-table-column>
     <el-table-column
             prop="wkprice"
             label="价格"
             width="180">
     </el-table-column>

     <el-table-column
             prop="rstatus"
             label="状态"
             width="180">
     </el-table-column>
   </el-table>
</div>

   <!--   END房间显示-->

  <!-- info section -->

  <section class="info_section">
    <div class="container">
      <div class="heading_container">
        <h2>
          Contact Us
        </h2>
        <p>
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
        </p>
      </div>
    </div>
    <div class="info_container">
      <div class="container">
        <div class="social_container">
          <div class="info_social">
            <div>
              <a href="">
                <img src="images/facebook-logo-button.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/twitter-logo-button.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/linkedin.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/instagram.png" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <h5>
              Subscribe Newsletter
            </h5>
            <p>
              ncididunt ut labore et dolore magna
              minim veniam, quis nostrud
            </p>
            <form action="">
              <input type="text" placeholder="Enter your email">
              <div class="">
                <button>
                  Subscribe
                </button>
              </div>
            </form>
          </div>
          <div class=" col-lg-4">
            <div class="info_nav_link">
              <h5>
                Useful link
              </h5>
              <ul>
                <li>
                  <a href="#">
                    Home
                  </a>
                </li>
                <li>
                  <a href="#bookTrip">
                    Book trip
                  </a>
                </li>
                <li>
                  <a href="#package">
                    Packages
                  </a>
                </li>
                <li>
                  <a href="#service">
                    Services
                  </a>
                </li>
                <li>
                  <a href="#blog">
                    Blog
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4">
            <h5>
              Address
            </h5>
            <div class="info_link-box">
              <a href="">
                <img src="images/location2.png" alt="">
                <span> Passages of Lorem Ipsum available</span>
              </a>
              <a href="">
                <img src="images/call.png" alt="">
                <span>Call : 17674728025</span>
              </a>
              <a href="">
                <img src="images/mail.png" alt="">
                <span> doublelikex@163.com</span>
              </a>
            </div>
          </div>
        </div>
        <!-- footer section -->
        <section class=" footer_section">
          <p>Copyright &copy; 2022.ComfortableHome </p>
        </section>
        <!-- footer section -->
      </div>
    </div>
  </section>

  <!-- end info section -->



 
  </div>
</body>

</html>


 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <!-- import JavaScript -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  

  <!-- range selector slider script -->
  <script src="js/ion.rangeSlider.min.js"></script>

  <script>
    $(".js-range-slider").ionRangeSlider({
      skin: "round",
      type: "double",
      min: 200,
      max: 10000,
      from: 200,
      to: 500,
      grid: true
    });
	
	let vue = new Vue({
		el:"#myDiv",
		data:function(){
			return {
              rname:"",
              telphone:"",
              roomid:"",
              id:"",
              rid:"",
              wkprice:"",
              roomAndType:[],
              roomAndTypeinfo :{
                rid:"",
                rname:"",
                rstatus:"",
                wkprice:""
              },
              zyfj:[{datevalue:'',roomvalue:'',money:''}],//租用房间({//日期，房间号})

			}
		},
		methods: {
          queryroomtype:function(){//查询所有的房间and类型
            let _this=this;
            axios.get("/MyWeb2/RoomSevlet?method=selectRoomAndType2",{
              params:{
              }
            }).then(function(respons){
              console.log('房间and类型:',respons)
              if(respons.data.code==0){
                _this.roomAndType=respons.data.data;

                //roomtypefital
                //遍历房间类型push进roomtypefital数组中


              }else{
                _this.$message("错误:",respons.data.msg)
              }

            }).catch(function(error){
              _this.$message("错误",error)
            })
          },

		  choose:function(row, column, event){
            this.rname= row.rname
            this.wkprice=row.wkprice
            this.rid=row.rid

          },
          commit: function () {
            // let url = "/MyWeb2/ClientServle?method=xxx"
            // axios.get(url ).then()
            let _this = this
            let a=["555"];
            axios.get("/MyWeb2/RentSevlet?method=renRoom", {
              params: {
                //房间信息
                zyfj: JSON.stringify([{datevalue:["2022-04-02","2022-04-03"],roomvalue:_this.rid,money:_this.roomprice}]),//所以房间信息数组(时间，房价，房号)

                rstatus: '预定',
                //基本信息
                name: _this.name,//姓名
                phone: _this.telphone,//电话号码
                idcard: _this.id,//身份证号码
                timetype: 1,
                sunmoney: _this.roomprice,//房间总价
                out_status: '欠款',
                yajin: 100,
                moneysum: _this.roomprice,//房间总价
                ltype: '全日房',
                goods:JSON.stringify([]),
                othermoney:0,
              }
            }).then(function(respons){
              if(respons.data.code==0){
                _this.$notify({
                  title: '成功',
                  message: '预约成功!',
                  type: 'success'
                });

              }else{
                _this.$message("错误1:"+respons.data.msg)
              }

            }).catch(function(error){
              _this.$message("错误2"+error)
            });

          }
        },
      mounted() {
        this.queryroomtype();

      }


	});
  </script>